<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <!-- import CSS -->
    <!-- <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    /> -->
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <link rel="stylesheet" type="text/css" href="./css/element-ui-index.css" />
  </head>

  <body>
    <style>
      #app {
        width: 80vw;
        margin: 60px auto auto auto;
      }
    </style>
    <div id="app">
      <h2>success</h2>
      <el-form ref="rulesForm" :model="rulesForm">
        <el-form-item
          v-for="(item, index) in rulesForm.inputGroups"
          :key="index"
          :prop="`inputGroups[${index}].value`"
        >
          <!-- v-for="(index,item) in groupInput"
   :key = "groupInput"
   :prop =  -->
          <!--  -->
          <el-input v-model="item.value" :placeholder="item.placeholder" />
        </el-form-item>
      </el-form>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="js/vue.js"></script>
  <!-- import JavaScript -->
  <script src="js/element-ui-lib-index.js"></script>
  <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          rulesForm: {
            inputGroups: [
              { value: null, placeholder: "a" },
              { value: null, placeholder: "b" },
            ],
          },
        };
      },
    });
  </script>
</html>
